In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to build a framework to test our entire web page or application. For building a framework, we might consider a design pattern for our tests. And one of the most popular test design patterns for selenium tests is Page Object Model. It is also strongly encouraged to use by Selenium’s Wiki.

First, let’s briefly understand what Page Object Model (POM ) is.

POM is the most widely used design pattern by the Selenium community on which each web page (or significant ones) considered as a different class. On each of this page classes (i.e page objects), you may define the elements of that page and specific methods for that page. Each page object represents the page of the web page or application. It is a layer between the test scripts and UI and encapsulates the features of the page.

The advantages of page object model can be listed as:

Page Factory is an extension to page objects that are used to initialize the web elements that are defined on the page object. You can define the web elements by using annotation with the help of page factory.

Important Note: From 3.11 version of Selenium C# Bindings, Page Factory is deprecated!  https://raw.githubusercontent.com/SeleniumHQ/selenium/master/dotnet/CHANGELOG

If you would like to learn more about POM, I suggest you might read Martin Fowler’s article about it.

Let’s start by creating a new project in Visual Studio. I am using Visual Studio 2017 Community Edition which can download here.

And name our project.

Before writing our test cases, let’s create our page objects. In this tutorial, I am going to model www.swtestacademy.com. For the sake of a decent design, let’s create a folder and call it “PageObjects”. We will add page object classes in this folder.

To do that, right-click on the project name (‘POMExample’ in this tutorial), hover on add and click on “New Folder”.

Name it as “PageObjects”.

Now we can add the page object classes inside the folder. In this tutorial, we will cover the home,  about and search result pages. So lets add three classes and name them as “Homepage”, “AboutPage”, “ResultPage” respectively. We are going to model the home page, about and the page that searches are enlisted.

After you add the classes you will have:

It is time to fill inside our page objects. Let’s start with ‘HomePage’ first.

Click on ‘HomePage.cs’ and your homepage class should look exactly like below:

Let’s understand step by step what our ‘Homepage.cs’ does.

This is our constructor. Each page should use the driver on the test class, therefore, this classes driver equals to the driver passed from the test class. PageFactory.InitElements() is used to [FindsBy] annotation to work.

Here, with the help of Page Factory [FindsBy] annotation finds the web elements on the homepage.

And finally, we define the functionalities of our homepage. Please note that a page object method may return another page object as shown above.

Please copy the ‘AboutPage.cs’ and ‘ResultPage.cs’ respectively.

We have created our page objects. Now it is time to write our test case(s) by using the page objects.

“Class1.cs” will be our test class so let’s rename it as “TestClass.cs” or you can name it as you wish.

And click “Yes” when asked to change the class name too.

Let’s take a closer look at our test method to understand how we use page object on the test case.

First, we create an instance of the page object so we can call the method from there. Since goToAboutPage() returns AboutPage, we may create the instance of that page object as shown above.

Let’s imagine how we would write this test case without using POM.

How the quality of code changed can be observed easily. If we use these elements on different tests, we have to find them over and over again in each test which will be a huge burden. So implementing POM within your automation frameworks will provide you many advantages.

GitHub Page of the Project https://github.com/swtestacademy/POMExampleCSharp

[fusion_widget_area name=”avada-custom-sidebar-seleniumwidget” title_size=”” title_color=”” background_color=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””][/fusion_widget_area]

Thanks. Ege

Holding a BSc in Mechatronics, Ege loves to automate. He is now working as a Software Development Engineer In Test at XebiaLabs, Amsterdam.